<template>
    <div class="list">
        <div class="item" v-for="item in props.fileList" :key="item.id">
            <z-img class="img" :file="item.file" @click="handlePreview(item)"></z-img>
            <div class="con" @click="copy(item)">
                <n-ellipsis style="max-width: 100%">
                    {{item.status == 'removed' ? '已删除' : item.name}}
                </n-ellipsis>
            </div>
            <div class="state">
                <n-progress class="state-progress" style="width: 30px;" :stroke-width="4" type="circle" :show-indicator="item.status != 'uploading'" :percentage="item.percentage" :status="item.status == 'uploading' ? 'default' : item.status == 'error' ? 'error' : item.status == 'finished' ? 'success' : 'info'" />
                <div class="delect-svg" v-if="item.status == 'uploading' || item.status == 'finished'" @click="cancelUploadItem(item)">
                    <svg t="1653147384906" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2997" width="64" height="64">
                        <path d="M519.620465 0c-103.924093 0-188.511256 82.467721-192.083349 185.820279H85.015814A48.91386 48.91386 0 0 0 36.101953 234.686512a48.91386 48.91386 0 0 0 48.913861 48.866232h54.010046V831.345116c0 102.852465 69.822512 186.844279 155.909954 186.844279h439.200744c86.087442 0 155.909953-83.491721 155.909954-186.844279V284.100465h48.91386a48.91386 48.91386 0 0 0 48.913861-48.890046 48.91386 48.91386 0 0 0-48.913861-48.866233h-227.756651A191.559442 191.559442 0 0 0 519.620465 0z m-107.234232 177.080558c3.548279-49.771163 46.627721-88.540279 99.851907-88.540279 53.224186 0 96.327442 38.745302 99.351813 88.540279h-199.20372z m-111.997024 752.044651c-30.981953 0-65.083535-39.15014-65.083535-95.041488V287.744h575.488v546.839814c0 55.915163-34.077767 95.041488-65.059721 95.041488H300.389209v-0.500093z" fill="#D81E06" p-id="2998"></path>
                        <path d="M368.116093 796.814884c24.361674 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.908465-48.818605-44.27014-48.818604-24.33786 0-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.293954 48.818605z m154.933581 0c24.361674 0 44.293953-21.670698 44.293954-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.293954-48.818604-24.33786 0-44.27014 21.670698-44.270139 48.818604v278.623256c0 27.147907 19.932279 48.818605 44.293953 48.818605z m132.810419 0c24.33786 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.27014-48.818604s-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.27014 48.818605z" fill="#D81E06" p-id="2999"></path>
                    </svg>
                </div>
            </div>
            <div class="progress" v-if="item.status == 'uploading'">
                <n-progress type="line" :height="2" :show-indicator="false" :percentage="item.percentage" :status="item.status == 'uploading' ? 'default' : item.status == 'error' ? 'error' : item.status == 'finished' ? 'success' : 'info'" />
            </div>
        </div>
    </div>

    <n-modal class="upload-list-modal" @click="showModal = false" v-model:show="showModal" preset="dialog" :closable="false" :showIcon="false">
        <img :src="previewImageUrl">
        <div class="btns">
            <n-button type="tertiary" @click="showModal = false" style="background-color: #fff; margin-right:10px;">关闭</n-button>
            <n-button type="success" @click="copy(previewImageUrl)">复制链接</n-button>
        </div>
        <!-- <n-image style="width: 100%;max-height: 80vh;" :src="previewImageUrl" /> -->
    </n-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ZImg from './ZImg.vue'
import { copyText, cancelUpload, delectFile } from '@/tool'
import { useMessage, UploadFileInfo, useDialog } from 'naive-ui'
const props = defineProps<{
    fileList: UploadFileInfo[]
}>()
const dialog = useDialog()
const message = useMessage()
const showModal = ref(false)
const previewImageUrl = ref<string | undefined>('')
const previewImageNume = ref('')
// 点击图片事件
function handlePreview(file: UploadFileInfo) {
    const { url, name, type, status } = file
    if (status != 'finished') {
        message.warning('还没有完成上传')
        return
    }
    if (type && type.indexOf('image') !== -1) {
        previewImageUrl.value = url ? url : undefined
        previewImageNume.value = name
        showModal.value = true
    } else {
        message.warning('这好像是个文件，暂不支持查看')
    }
}
// 复制
const copy = (res: UploadFileInfo | string | undefined) => {
    if (typeof res == 'string') {
        copyText(res)
        message.success('复制链接成功')
        return
    }
    if (res && res.status == 'finished') {
        if (res.url) {
            copyText(res.url)
            message.success('复制链接成功')
        }
    } else {
        message.warning('还没有完成上传')
    }
}

// 取消上传
const cancelUploadItem = (item: UploadFileInfo) => {
    if (item.status == 'finished') {
        // 已经完成上传
        dialog.error({
            title: '警告',
            content: '确定要从存储中删除这个文件吗？',
            positiveText: '确定',
            negativeText: '不',
            onPositiveClick: () => {
                if (typeof item.url == 'string') {
                    delectFile(item.url).then(()=>{
                        message.success("删除成功！")
                        item.status = 'removed'
                    }).catch((e)=>{
                        message.error(e.msg)
                    })
                }else{
                    message.warning("前端出现未知错误！")
                }
            },
            onNegativeClick: () => {},
        })
    } else if (item.status == 'uploading') {
        // 正在上传
        dialog.warning({
            title: '警告',
            content: '确定要取消上传吗？',
            positiveText: '确定',
            negativeText: '不',
            onPositiveClick: () => {
                cancelUpload(item.id)
            },
            onNegativeClick: () => {},
        })
    }
}
</script>

<style scoped lang="scss">
.list {
    .item {
        position: relative;
        // padding: 2px 0;
        height: 60px;
        display: flex;
        border-top: 1px solid #eeeeee;
        &:nth-child(1) {
            border-top: none;
        }
        &:hover {
            background-color: #f2f2f2;
        }
        .img {
            height: 58px;
            width: 58px;
            padding: 1;
            cursor: pointer;
            object-fit: contain;
        }
        .con {
            margin-left: 10px;
            flex: 1;
            display: flex;
            align-items: center;
            overflow: hidden;
            cursor: pointer;
        }
        .state {
            position: relative;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            // 删除的图标
            .delect-svg {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: none;
                align-items: center;
                justify-content: center;
                transition: all 0.1s;
                svg {
                    width: 26px;
                    height: 26px;
                }
            }
            &:hover {
                .delect-svg {
                    background-color: rgb(226, 226, 226);
                    display: flex;
                    cursor: pointer;
                }
            }
        }
        .progress {
            width: 100%;
            position: absolute;
            top: 59px;
            left: 0;
        }
    }
}
</style>

<style lang="scss">
.upload-list-modal {
    padding: 0;
    width: 95% !important;
    max-width: 900px !important;
    --n-content-margin: 0 !important;
    --n-color: #00000000 !important;
    --n-box-shadow: none !important;
    img {
        width: 100%;
        max-height: 80vh;
        object-fit: contain;
    }
    .btns {
        text-align: center;
        padding: 5px;
    }
}
</style>